<template>
	<view class="cash">
		<!-- bgcolor="#FD9031" -->
		<title :center="true" title="提现" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)"  color="#FFF"
			@to-click="toBack(1)" icon="/static/img/other/to-back.png"></title>
		<view class="cash_body" :style="{'padding-top': height * 1.5 + 120 + 'rpx'}">
			<!-- 添加支付宝 -->
			<view class="cashToZFB f ali_i">
				<text>提现至:</text>
				<view v-if="ali_account == ''" class="ri bl" @click="toZFB">
					<!-- <u-icon name="zhifubao"></u-icon> -->
					<text>点击绑定</text>
					<!-- <view class="iconfont icon--arrow-bottom trans"></view> -->
				</view>
				<view v-else class="ri bl">
					<u-icon name="zhifubao"></u-icon>
					{{ali_account}}
				</view>
			</view>

			<!-- 提现金额 -->
			<view class="cash_count">
				<view class="cash_count_title">
					提现金额
				</view>
				<view class="cash_count_body f">
					<text>￥</text>
					<input class="inpO" type="number" v-model="accountTwo" :placeholder="account" />
				</view>
				<view class="cash_count_bottom f">
					<view class="le f">
						<text>可提现:</text>
						<view class="price">￥
							<text >{{account}}</text>
						</view>
					</view>
					<text class="tt" @click="allCash">全部提现</text>
				</view>
			</view>
		
			<!-- 详情介绍 -->
			<view class="cash_info">
				<view class="slip f ali_i">
					<view class="dot">
					</view>
					<text>每日只允许提现1次</text>
				</view>
				<view class="slip f ali_i">
					<view class="dot">
					</view>
					<text>目前提现暂不收取手续费</text>
				</view>
				<view class="slip f ali_i">
					<view class="dot">
					</view>
					<text>提现金额每笔不能超过5000元且满1元可提现</text>
				</view>
			</view>
		
			<!-- 提现按钮 -->
			<view class="cash_botton f ali_i">
				<button type="default" class="btn" @click="cashBtn">提现</button>
				<view class="reword" @click="toCashRecord">
					提现记录
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				height:0,
				// 支付宝账户
				ali_account:"",
				// 可提现金额
				account:0,
				// 提现金额
				accountTwo:""
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight()
			})
			this.getMyBalance()
		},
		onLoad() {
		},
		methods: {
			// 跳转
			toBack(i) {
				uni.navigateBack({
					delta: i
				})
			},
			toZFB(){
				uni.navigateTo({
					url:'../add_zfb/add_zfb'
				})
			},
			toCashRecord(){
				uni.navigateTo({
					url:'../cashrecord/cashrecord'
				})
			},
			// 全部提现
			allCash(){
				this.accountTwo = this.account
			},
			// 获取提现金额
			getMyBalance(){
				let _this = this
				this.$api.getMyBalance().then((res)=>{
					_this.account = res.data.data.balance
					_this.ali_account = res.data.data.ali_account
				})
			},
			// 提现方法
			getCash(){
				// console.log(this.accountTwo)
				// console.log(typeof(this.accountTwo))
				if(!this.accountTwo){
					uni.showToast({
						title:'请输入您的提现金额',
						icon:'none'
					})
					return false
				}
				if(typeof(Number(this.accountTwo)) === 'number' && !isNaN(this.accountTwo)){
					if(Number(this.accountTwo) > this.account){
						uni.showToast({
							title:'非常抱歉，您的余额不足',
							icon:"none"
						})
						return false
					}
					let data = {
						price:this.accountTwo
					}
					this.$api.toCash(data).then((res)=>{
						// console.log(res)
						this.getMyBalance()
					})
				}else{
					uni.showToast({
						title:'请输入正确的金额格式',
						icon:"none"
					})
					return false
				}
			},
			// 提现按钮
			cashBtn(){
				uni.showModal({
					title:'提示',
					content:'每天只能提现一次，是否确认提现?',
					confirmColor:'#EF3B5D',
					cancelColor:'#666666',
					cancelText:'取消',
					confirmText:'确定',
					success: (res) => {
						// console.log(res.confirm)
						if(res.confirm){
							this.getCash()
						}
					}
				})
			}
		},
		components: {
			title
		}
	}
</script>

<style lang="scss" scoped>
	.cash {
		background-color: #F1F1F1;
		width: 100vw;
		height: 100vh;

		.cash_body {
			padding: 20rpx 24rpx;
			padding-top: 150rpx;

			// 添加支付宝
			.cashToZFB {
				width: 702rpx;
				height: 100rpx;
				background: #FFFFFF;
				padding: 0 26rpx;
				box-shadow: 0px 0px 9rpx 0px rgba(179, 179, 179, 0.24);
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: bold;
				font-family: PingFang SC;
				color: #333333;

				.ri {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;

					.trans {
						display: inline-block;
						margin-left: 17rpx;
						transform: rotate(-90deg);
						font-size: 20rpx;
					}
				}
				.bl{
					color: #0081ff;
				}
				

			}


			// 提现金额
			.cash_count {
				padding: 31rpx;
				margin-top: 20rpx;
				width: 702rpx;
				height: 322rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(179, 179, 179, 0.24);
				border-radius: 8rpx;

				.cash_count_title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 51rpx;
				}

				.cash_count_body {
					font-size: 36rpx;
					justify-content: flex-start;
					font-weight: 500;
					color: #333333;
					padding-bottom: 34rpx;
				}

				.cash_count_bottom {
					font-size: 36rpx;
					// justify-content: flex-start;
					color: #666666;
					padding-top: 38rpx;
					border-top: 1px solid #E2E2E2;

					.le {
						font-size: 28rpx;
						.price{
							margin-left: 15rpx;
						}
					}

					.tt {
						color: #EF3B5D;
						font-weight: bold;
						font-size: 30rpx;
					}
				}
			}
		
			// 详情
			.cash_info{
				margin-top: 42rpx;
				font-weight: 400;
				color: #999999;
				font-size: 24rpx;
				.slip{
					justify-content: flex-start;
					
					margin-bottom: 19rpx;
					.dot{
						display: inline-block;
						width: 8rpx;
						height: 8rpx;
						background: #999999;
						border-radius: 50%;
						margin-left: 30rpx;
						margin-right: 28rpx;
					}
				}
				
			}
		
			// 提现按钮
			.cash_botton{
				flex-direction: column;
				margin-top: 79rpx;
				.btn{
					width: 701rpx;
					height: 88rpx;
					background: linear-gradient(91deg, #EF4447 0%, #EF298A 100%);
					border-radius: 44px;
					font-weight: 500;
					font-size: 32rpx;
					color: #FEFEFE;
					margin-bottom: 20rpx;
				}
				.reword{
					font-size: 24rpx;
					color: #EF3B5D;
				}
			}
		}
	}

	.f {
		display: flex;
		justify-content: space-between;
	}

	.ali_i {
		align-items: center;
	}
</style>
